<template>
  <div class="flex flex-col home relative">
    <HeadVue title="微信" @setting="showSetting = true"> </HeadVue>
    <div class="px-16 device flex gc-8 align-center">
      <div class="image flex flex-s">
        <img :src="terminalPng" width="16" height="16"  />
      </div>
      <span class="text-888">2个设备已登录微信</span>
    </div>
    <Chat class="flex-1"></Chat>
    <ChatSettingVue></ChatSettingVue>
  </div>
</template>

<script setup lang="ts">
  import HeadVue from '@/views/components/head/Head.vue';
  import terminalPng from '@/assets/images/terminal.png';
  import Chat from './chat/Chat.vue';
  import ChatSettingVue from './setting/Setting.vue';
  import { showSetting } from './setting/setting';
</script>

<style lang="scss" scoped>
  $hh: 42px;
  .home {
    height: 100%;
  }
  .device {
    border-bottom: 1px solid var(--border-color);
    height: $hh;
    line-height: $hh;
    background-color: var(--background-color);
    .image {
      width: 46px;
    }
  }
</style>
